<template>
  <div>
    <PageTitle>
      {{ $t('menu.M_10400002') }}
    </PageTitle>

    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="totalPage"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline @submit.prevent.native>
        <el-form-item>
          <el-input
            v-model="dataForm.devSn"
            :placeholder="$t('device.sn')"
            clearable
            maxlength="32"
            @keyup.enter.native="search()"
            @blur="() => (dataForm.devSn = dataForm.devSn.trim())"
          />
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.status" :placeholder="$t('device.status')" clearable>
            <el-option :value="1" :label="$t('device.status_list.activated')" />
            <el-option :value="2" :label="$t('device.status_list.locked')" />
            <el-option :value="9" :label="$t('device.status_list.inventory')" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="w-8" type="primary" @click="search()">
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="addTerminal()">
            <svg-icon icon-class="plus" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" stripe>
        <!-- <el-table-column type="selection" width="60" reserve-selection class="tableSelect" /> -->
        <el-table-column prop="sn" :label="$t('device.sn')" />
        <el-table-column
          key="merchantName"
          prop="merchantName"
          :label="$t('appstore.application.mrchName')"
        />
        <el-table-column prop="modelName" :label="$t('device.modelCode')" />
        <el-table-column prop="status" :label="$t('device.status')" width="100px">
          <template v-slot="scope">
            <el-tag
              v-if="scope.row.status == 1"
              size="small"
              type="success"
              class="el-tag--green"
              >{{ $t('device.status_list.activated') }}</el-tag
            >
            <el-tag v-if="scope.row.status == 2" size="small" type="info" class="el-tag--red">{{
              $t('device.status_list.locked')
            }}</el-tag>
            <el-tag
              v-if="scope.row.status == 9"
              size="small"
              type="info"
              class="el-tag--geekblue"
              >{{ $t('device.status_list.inventory') }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="activeTime" :label="$t('device.activeTime')" align="center">
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.activeTime)">
              {{ dateFilter(scope.row.activeTime) }}
              {{ scope.row.activeTime ? '' : '-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="creTime" :label="$t('common.createTime')" align="center">
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.creTime)">
              {{ dateFilter(scope.row.creTime) }}
              {{ scope.row.creTime ? '' : '-' }}
            </div>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="creTime"-->
        <!--          :label="$t('device.importTime')"-->
        <!--          -->
        <!--          -->
        <!--          width="180px"-->
        <!--        >-->
        <!--          <template v-slot="scope">-->
        <!--            <div :title="scope.row.creTime | timeFilter">-->
        <!--              {{ dateFilter( scope.row.creTime ) }}-->
        <!--              {{ scope.row.creTime ? '' : '-' }}-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column width="75px">
          <template v-slot="scope">
            <el-dropdown class="align-middle" trigger="click">
              <el-button text class="w-8">
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    @click="statusHandle(scope.row.devId, lockStatus)"
                    :disabled="scope.row.status === 2 || scope.row.status === 9"
                  >
                    <svg-icon icon-class="outlined-lock" />
                    {{ $t('operator.locked') }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    @click="statusHandle(scope.row.devId, activeStatus)"
                    :disabled="scope.row.status === 1 || scope.row.status === 9"
                  >
                    <svg-icon icon-class="outlined-unlock" />
                    {{ $t('operator.unlock') }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    @click="resetHandle(scope.row.devId)"
                    :disabled="scope.row.status === 9"
                  >
                    <svg-icon icon-class="outlined-reload" />
                    {{ $t('common.reset') }}
                  </el-dropdown-item>
                  <el-dropdown-item @click="deleteHandle(scope.row.devId)">
                    <svg-icon icon-class="outlined-delete" />
                    {{ $t('page.delete') }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <AddTerminal
      v-model="addTerminalVisible"
      :title="$t('flyparam.new_terminal')"
      @refresh="getData((pageNo = 1))"
    />
  </div>
</template>
<script>
import { timeFilter, dateFilter } from '@/filters/index'
import { pageMixins } from '@/mixins/pagination-mixins'
import PageTitle from '@/components/PageTitle/index.vue'
import axios from 'axios'
import store from '@/store'
import { getTerminalList, updateTerminalStatus, deleteTerminal, resetTerminal } from '@/api/tms'
import AddTerminal from './addTerminal.vue'

export default {
  name: 'Terminal',
  components: {
    PageTitle,
    AddTerminal
  },
  mixins: [pageMixins],
  data() {
    return {
      dataForm: {
        devSn: '',
        status: ''
      },
      deviceModels: [],
      pageNo: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataList: [],
      addTerminalVisible: false,
      activeStatus: 1,
      lockStatus: 2
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    timeFilter,
    dateFilter,
    currentChangeHandle(val) {
      this.pageNo = val
      this.getData()
    },
    addTerminal() {
      this.addTerminalVisible = true
    },
    statusHandle(id, status) {
      this.$confirm(this.$t('modules.pass.terminal_status_tip'), this.$t('common.prompt'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'info'
      })
        .then(() => {
          updateTerminalStatus(id, status)
            .then((res) => {
              this.getData()
              this.$message({
                type: 'success',
                message: this.$t('system.ram.edit_success')
              })
            })
            .catch((err) => {
              this.$confirmError(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('modules.pass.edit_canceled')
          })
        })
    },
    resetHandle(id) {
      this.$confirm(this.$t('modules.pass.terminal_reset_tip'), this.$t('common.prompt'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'info'
      })
        .then(() => {
          resetTerminal(id)
            .then((res) => {
              this.getData()
              this.$message({
                type: 'success',
                message: this.$t('modules.pass.reset_success')
              })
            })
            .catch((err) => {
              this.$confirmError(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('modules.pass.reset_cancel')
          })
        })
    },
    deleteHandle(id) {
      this.$confirm(this.$t('modules.pass.terminal_delete_tip'), this.$t('common.prompt'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'info'
      })
        .then(() => {
          let data = {
            ids: [id]
          }
          deleteTerminal(data)
            .then((res) => {
              this.getData()
              this.$message({
                type: 'success',
                message: this.$t('modules.pass.delete_complete')
              })
            })
            .catch((err) => {
              this.$confirmError(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('modules.pass.delete_canceled')
          })
        })
    },
    search() {
      this.pageNo = 1
      this.getData()
    },
    getData() {
      let params = {
        sn: this.dataForm.devSn,
        status: this.dataForm.status,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      getTerminalList(params)
        .then((res) => {
          this.dataList = res.data
          this.totalPage = res.rows
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.model-list {
  width: 300px;
  flex: 0 0 300px;
  height: calc(100vh - 240px);
}
.group-list {
  li {
    color: #555555;
    border-top: 1px solid #f5f7fa;
    cursor: pointer;
    padding: 16px;
    &:first-child {
      border-top: none;
    }
    &.active {
      background: #f5f7fa;
      color: #12263f;
      font-size: 1.1em;
      font-weight: 700;
    }
    .app-icon {
      width: 48px;
    }
  }
}
</style>
